<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五人出场顺序生成器</title>
  <!-- Tailwind CSS v3 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF7D00', // 活力橙
            secondary: '#0066CC', // 深蓝
            neutral: '#F0F4F8', // 中性灰
            dark: '#1A2B42' // 深色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'bounce-slow': 'bounce 2s infinite',
            'spin-slow': 'spin 3s linear infinite',
            'wiggle': 'wiggle 1s ease-in-out infinite',
            'float': 'float 3s ease-in-out infinite',
          },
          keyframes: {
            wiggle: {
              '0%, 100%': { transform: 'rotate(-3deg)' },
              '50%': { transform: 'rotate(3deg)' },
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            }
          }
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
      }
      .bg-gradient-primary {
        background: linear-gradient(135deg, theme('colors.primary'), #FF9E00);
      }
      .bg-gradient-secondary {
        background: linear-gradient(135deg, theme('colors.secondary'), #004C99);
      }
      .transition-all-300 {
        transition: all 300ms ease-in-out;
      }
      .transition-transform-500 {
        transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
    }

    /* 自定义样式 */
    .order-card {
      transition: all 0.3s ease;
    }

    .order-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .shuffle-animation {
      animation: shuffle 0.5s ease-in-out;
    }

    @keyframes shuffle {
      0% { transform: translateX(0); }
      25% { transform: translateX(-20px) rotate(-5deg); }
      50% { transform: translateX(20px) rotate(5deg); }
      75% { transform: translateX(-10px) rotate(-2deg); }
      100% { transform: translateX(0); }
    }

    .confetti {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #f00;
      opacity: 0.8;
      animation: confetti-fall 3s ease-in-out forwards;
    }

    @keyframes confetti-fall {
      0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
      }
    }
  </style>
</head>
<body class="bg-neutral min-h-screen font-sans text-dark">
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 标题区域 -->
    <header class="text-center mb-10">
      <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-secondary mb-2 text-shadow-lg">
        <i class="fa fa-random mr-2"></i>五人出场顺序生成器
      </h1>
      <p class="text-gray-600 text-lg">公平、随机、有趣的出场顺序决定工具</p>
    </header>

    <!-- 主内容区域 -->
    <main class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8">
      <!-- 输入区域 -->
      <section class="mb-8">
        <h2 class="text-xl font-semibold mb-4 flex items-center">
          <i class="fa fa-user-plus text-primary mr-2"></i>输入参与者信息
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div id="participants-container" class="space-y-3">
            <!-- 参与者输入框 -->
            <div class="participant-input flex items-center">
              <span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">1</span>
              <input type="text" placeholder="请输入参与者姓名" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300">
            </div>
            <div class="participant-input flex items-center">
              <span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">2</span>
              <input type="text" placeholder="请输入参与者姓名" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300">
            </div>
            <div class="participant-input flex items-center">
              <span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">3</span>
              <input type="text" placeholder="请输入参与者姓名" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300">
            </div>
            <div class="participant-input flex items-center">
              <span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">4</span>
              <input type="text" placeholder="请输入参与者姓名" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300">
            </div>
            <div class="participant-input flex items-center">
              <span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mr-3">5</span>
              <input type="text" placeholder="请输入参与者姓名" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all-300">
            </div>
          </div>

          <div class="flex flex-col justify-center items-center bg-neutral rounded-xl p-6">
            <div id="animation-preview" class="w-full h-48 flex items-center justify-center mb-4">
              <div class="flex space-x-2">
                <div class="w-10 h-10 rounded-full bg-primary animate-bounce" style="animation-delay: 0s;"></div>
                <div class="w-10 h-10 rounded-full bg-secondary animate-bounce" style="animation-delay: 0.2s;"></div>
                <div class="w-10 h-10 rounded-full bg-primary animate-bounce" style="animation-delay: 0.4s;"></div>
                <div class="w-10 h-10 rounded-full bg-secondary animate-bounce" style="animation-delay: 0.6s;"></div>
                <div class="w-10 h-10 rounded-full bg-primary animate-bounce" style="animation-delay: 0.8s;"></div>
              </div>
            </div>
            <p class="text-gray-600 text-center mb-4">输入五个人的姓名，然后点击下方按钮生成随机出场顺序</p>
            <button id="generate-btn" class="bg-gradient-primary hover:opacity-90 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all-300 flex items-center">
              <i class="fa fa-magic mr-2"></i>生成出场顺序
            </button>
          </div>
        </div>
      </section>

      <!-- 结果展示区域 -->
      <section id="result-section" class="hidden">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-xl font-semibold flex items-center">
            <i class="fa fa-trophy text-primary mr-2"></i>出场顺序结果
          </h2>
          <button id="regenerate-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg shadow transition-all-300 flex items-center">
            <i class="fa fa-refresh mr-1"></i>重新生成
          </button>
        </div>

        <div id="result-container" class="space-y-4">
          <!-- 结果将通过JavaScript动态生成 -->
        </div>

        <div class="mt-8 text-center">
          <button id="celebrate-btn" class="bg-gradient-secondary hover:opacity-90 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all-300 flex items-center mx-auto">
            <i class="fa fa-confetti mr-2"></i>庆祝一下
          </button>
        </div>
      </section>
    </main>

    <!-- 历史记录区域 -->
    <section class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8">
      <h2 class="text-xl font-semibold mb-4 flex items-center">
        <i class="fa fa-history text-primary mr-2"></i>历史记录
      </h2>
      <div id="history-container" class="space-y-3 max-h-48 overflow-y-auto">
        <p class="text-gray-500 italic text-center">暂无历史记录</p>
      </div>
    </section>

    <!-- 底部信息 -->
    <footer class="text-center text-gray-500 text-sm">
      <p>© 2025 五人出场顺序生成器 | 公平、随机、有趣</p>
    </footer>
  </div>

  <!-- 庆祝效果容器 -->
  <div id="celebration-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-50"></div>

  <script>
    // 全局变量
    let historyRecords = [];
    const MAX_HISTORY_RECORDS = 5;

    // DOM元素
    const generateBtn = document.getElementById('generate-btn');
    const regenerateBtn = document.getElementById('regenerate-btn');
    const celebrateBtn = document.getElementById('celebrate-btn');
    const resultSection = document.getElementById('result-section');
    const resultContainer = document.getElementById('result-container');
    const historyContainer = document.getElementById('history-container');
    const celebrationContainer = document.getElementById('celebration-container');
    const participantInputs = document.querySelectorAll('.participant-input input');

    // 初始化
    function init() {
      // 绑定事件
      generateBtn.addEventListener('click', generateOrder);
      regenerateBtn.addEventListener('click', generateOrder);
      celebrateBtn.addEventListener('click', celebrate);

      // 加载历史记录
      loadHistory();
      updateHistoryUI();
    }

    // 生成随机顺序
    function generateOrder() {
      // 获取参与者姓名
      const participants = Array.from(participantInputs).map(input => {
        return input.value.trim() || `参与者${Array.from(participantInputs).indexOf(input) + 1}`;
      });

      // 验证是否有重复姓名
      const hasDuplicates = participants.length !== new Set(participants).size;
      if (hasDuplicates) {
        alert('请确保所有参与者姓名不重复');
        return;
      }

      // 随机排序
      const shuffled = shuffleArray([...participants]);

      // 显示结果
      displayResult(shuffled);

      // 保存历史记录
      saveHistory(shuffled);

      // 显示结果区域
      resultSection.classList.remove('hidden');

      // 滚动到结果区域
      resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    // Fisher-Yates 洗牌算法
    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    // 显示结果
    function displayResult(order) {
      // 清空容器
      resultContainer.innerHTML = '';

      // 创建结果卡片
      order.forEach((name, index) => {
        const delay = index * 0.2; // 每个卡片延迟显示
        const card = document.createElement('div');
        card.className = 'order-card flex items-center p-4 rounded-xl shadow-md opacity-0 transform translate-y-4';

        // 根据排名设置不同的样式
        let bgColor, textColor, borderColor, icon;
        if (index === 0) {
          bgColor = 'bg-yellow-50';
          textColor = 'text-yellow-600';
          borderColor = 'border-yellow-300';
          icon = 'fa-trophy';
        } else if (index === 1) {
          bgColor = 'bg-gray-100';
          textColor = 'text-gray-600';
          borderColor = 'border-gray-300';
          icon = 'fa-star';
        } else if (index === 2) {
          bgColor = 'bg-amber-50';
          textColor = 'text-amber-600';
          borderColor = 'border-amber-300';
          icon = 'fa-certificate';
        } else {
          bgColor = 'bg-blue-50';
          textColor = 'text-blue-600';
          borderColor = 'border-blue-300';
          icon = 'fa-flag';
        }

        card.className += ` ${bgColor} border ${borderColor}`;

        card.innerHTML = `
          <div class="w-10 h-10 rounded-full ${textColor} bg-white border ${borderColor} flex items-center justify-center mr-4 flex-shrink-0">
            <i class="fa ${icon}"></i>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-center">
              <h3 class="font-bold text-lg">${name}</h3>
              <span class="text-sm ${textColor} font-semibold">第 ${index + 1} 位出场</span>
            </div>
          </div>
        `;

        resultContainer.appendChild(card);

        // 添加动画效果
        setTimeout(() => {
          card.classList.add('shuffle-animation');
          setTimeout(() => {
            card.classList.remove('opacity-0', 'translate-y-4');
            card.classList.add('opacity-100', 'translate-y-0');
          }, 300);
        }, delay * 1000);
      });
    }

    // 保存历史记录
    function saveHistory(order) {
      const record = {
        id: Date.now(),
        timestamp: new Date().toLocaleString(),
        order: order
      };

      historyRecords.unshift(record); // 添加到开头

      // 限制历史记录数量
      if (historyRecords.length > MAX_HISTORY_RECORDS) {
        historyRecords.pop();
      }

      // 保存到本地存储
      localStorage.setItem('orderHistory', JSON.stringify(historyRecords));

      // 更新历史记录UI
      updateHistoryUI();
    }

    // 加载历史记录
    function loadHistory() {
      const saved = localStorage.getItem('orderHistory');
      if (saved) {
        historyRecords = JSON.parse(saved);
      }
    }

    // 更新历史记录UI
    function updateHistoryUI() {
      if (historyRecords.length === 0) {
        historyContainer.innerHTML = '<p class="text-gray-500 italic text-center">暂无历史记录</p>';
        return;
      }

      historyContainer.innerHTML = '';

      historyRecords.forEach(record => {
        const item = document.createElement('div');
        item.className = 'bg-neutral rounded-lg p-3 text-sm';

        item.innerHTML = `
          <div class="flex justify-between items-center mb-2">
            <span class="text-gray-500">${record.timestamp}</span>
            <button class="text-primary hover:text-primary-dark text-xs" onclick="loadHistoryRecord(${record.id})">
              <i class="fa fa-refresh mr-1"></i>重新使用
            </button>
          </div>
          <div class="flex flex-wrap gap-2">
            ${record.order.map((name, index) => `
              <span class="bg-white px-2 py-1 rounded-full text-xs border border-gray-200">
                ${index + 1}. ${name}
              </span>
            `).join('')}
          </div>
        `;

        historyContainer.appendChild(item);
      });
    }

    // 加载历史记录并重新生成
    window.loadHistoryRecord = function(id) {
      const record = historyRecords.find(r => r.id === id);
      if (record) {
        // 填充输入框
        record.order.forEach((name, index) => {
          if (participantInputs[index]) {
            participantInputs[index].value = name;
          }
        });

        // 生成顺序
        generateOrder();
      }
    };

    // 庆祝效果
    function celebrate() {
      // 创建彩色纸屑
      for (let i = 0; i < 100; i++) {
        createConfetti();
      }

      // 播放音效（如果有）
      // playCelebrationSound();
    }

    // 创建彩色纸屑
    function createConfetti() {
      const confetti = document.createElement('div');
      confetti.className = 'confetti';

      // 随机颜色
      const colors = ['#FF7D00', '#0066CC', '#00CC99', '#FFCC00', '#FF3366', '#9933CC'];
      const color = colors[Math.floor(Math.random() * colors.length)];
      confetti.style.backgroundColor = color;

      // 随机大小
      const size = Math.random() * 10 + 5;
      confetti.style.width = `${size}px`;
      confetti.style.height = `${size}px`;

      // 随机位置
      const posX = Math.random() * 100;
      confetti.style.left = `${posX}%`;

      // 随机动画延迟和持续时间
      const delay = Math.random() * 5;
      const duration = Math.random() * 3 + 2;
      confetti.style.animationDelay = `${delay}s`;
      confetti.style.animationDuration = `${duration}s`;

      // 添加到容器
      celebrationContainer.appendChild(confetti);

      // 动画结束后移除
      setTimeout(() => {
        confetti.remove();
      }, (delay + duration) * 1000);
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>
